<template>
  <div class="chart-container">
    <div class="chart-header">
      <!-- <div class="chart-controls">
        <el-select
          v-model="selectedChannel"
          clearable
          placeholder="不限渠道"
          class="channel-select"
          size="small"
        >
          <el-option
            v-for="item in channelOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
          size="small"
        >
        </el-date-picker>
      </div> -->
    </div>
    <div
      :class="className"
      :style="{ height: height, width: width }"
      class="chart"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from "./mixins/resize";

export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    selJobDataActiveList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      selectedChannel: "",
      dateRange: [],
      channelOptions: [
        { id: 1, name: "不限渠道" },
        { id: 2, name: "APP" },
        { id: 3, name: "手机浏览器" },
        { id: 4, name: "微信浏览器" },
        { id: 5, name: "微信小程序" },
        { id: 6, name: "抖音小程序" },
        { id: 7, name: "电脑浏览器" },
        { id: 8, name: "系统" },
      ],
      formattedDates: [],
      newMembersData: [],
      newResumesData: [],
    };
  },
  watch: {
    selJobDataActiveList(newVal, oldVal) {
      if (newVal.length > 0) {
        console.log("职位活跃度数据已更新:", newVal);
        this.processData();
        this.initChart();
      }
    },
    selectedChannel() {
      // 根据选择的渠道更新图表数据
    },
    dateRange() {
      // 根据选择的日期范围更新图表数据
    },
  },
  mounted() {
    if (this.selJobDataActiveList.length > 0) {
      this.processData();
      this.initChart();
    }
  },
  methods: {
    processData() {
      try {
        // 从时间戳格式化日期为x轴数据
        this.formattedDates = this.selJobDataActiveList[0]
          ? this.selJobDataActiveList[0]
              .map((timestamp) => this.$options.filters.formatDate(timestamp))
              .reverse()
          : [];

        // 处理新增个人会员数据
        this.newMembersData = this.selJobDataActiveList[1]
          ? [...this.selJobDataActiveList[1]].reverse()
          : [];

        // 处理新增简历数据
        this.newResumesData = this.selJobDataActiveList[2]
          ? [...this.selJobDataActiveList[2]].reverse()
          : [];
      } catch (error) {
        console.error("处理职位活跃度数据出错:", error);
      }
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }

      try {
        this.chart = echarts.init(this.$el.querySelector(".chart"), "macarons");

        this.chart.setOption({
          title: {
            text: "职位活跃度分析",
            left: "",
            textStyle: {
              color: "#333",
              fontWeight: "bold",
            },
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["新增个人会员", "新增简历数"],
            // top: 30,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.formattedDates,
            axisLabel: {
              interval: 0,
              rotate: 45,
              color: "#333",
            },
          },
          yAxis: {
            type: "value",
            max:70,
            axisLine: {
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              color: "#333",
            },
            splitLine: {
              lineStyle: {
                color: "#eee",
              },
            },
          },
          series: [
            {
              name: "新增个人会员",
              type: "line",
              data: this.newMembersData,
              itemStyle: { color: "#5470c6" },
            },
            {
              name: "新增简历数",
              type: "line",
              data: this.newResumesData,
              itemStyle: { color: "#ee6666" },
            },
          ],
        });

        // 添加窗口大小变化时的自适应处理
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      } catch (error) {
        console.error("初始化职位活跃度图表出错:", error);
      }
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
      window.removeEventListener("resize", this.chart.resize);
    }
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.chart-header {
  position: absolute;
  right: 10px;
  top: 15px;
  z-index: 999;
}

.chart-controls {
  display: flex;
  gap: 10px;
}

.channel-select {
  width: 120px;
}

.date-picker {
  width: 260px;
}

.chart {
  height: 400px;
  width: 100% !important;
}
</style>
